var path = require('path');
var fs = require('fs');
var Koa = require('koa');
const static = require('koa-static')
const mount = require('koa-mount')
var cheerio = require('cheerio')

var VueView = require('../../lib/index.js');
var dataProvider = require('./views/assets/js/dataProvider')

var app = new Koa();

// 应该有白名单机制，当请求的地址为.html且在白名单内时，就进入views里面找并编译，否则就直接返回静态文件。
// 也就是说网站上线后想要访问非seo页面，只要带上/views即可（只要不用绝对路径，如果用的话就在views里面启动server）


const file = './views/index.html'

app.use( mount('/assets',static('./views/assets')) )  // 放在views里面就要做这个映射，不放的话就要做白名单路由

app.use(VueView({
    methodName: 'render',
    data: {
        //_: require('lodash'),
        app: {
            name: 'Github',
            version: '1.0.0'
        }
    },
    filterHtml: function(html){
        // 找出原始模板 //TODO，要支持多个
        let myHtml = fs.readFileSync(file);
        let $old = cheerio.load(myHtml);
        let $new = cheerio.load(html);
        let oldTemplate = $old('html').find('#app').html();
            oldTemplate = JSON.stringify(oldTemplate);
            
        let script = `
            <script>
                    var __old_template__ = { 'app': {  template: 
                        //<![CDATA[ 
                            ${oldTemplate}
                        //]]> 
                        } }
            </script>
        `;
        $new(script).insertAfter('head')
        return "<!DOCTYPE html>" + $new.root();
    }
}));

app.use(ctx => {
    ctx.state = dataProvider;
    console.log('h 44')
    // 把html里面的原始模板取出来，返回给前端使之重现绑定操作
    ctx.render(path.resolve(__dirname, file));
})


app.on('error', (err, ctx) => {
    ctx.body = 'sdf：' + err.message;
})

app.listen(8200);